<script setup>
import { computed, ref, provide } from 'vue'
import MyTable from '@/components/MyTable/MyTable.vue'
import ImageView from '@/components/ImageView/ImageView.vue'

const props = defineProps({
  // 表格数据总条数
  total: { type: Number, default: 0 },
  // 表格当前页码
  pageNum: { type: Number, default: 1 }
})
const emits = defineEmits(['auth', 'pageChange'])
// 分页参数
const pagination = computed(() => ({
  total: props.total,
  showSizeChanger: false,
  current: props.pageNum,
  onChange: (e) => {
    emits('pageChange', e)
  }
}))
// 表格列配置
const columns = ref([
  { ellipsis: true, title: '用户昵称', dataIndex: 'nickName', key: 'nickName', width: 300 },
  { ellipsis: true, title: '手机号', dataIndex: 'phone', key: 'phone' },
  { title: '权限', key: 'auth' },
  { ellipsis: true, title: '操作手类型', key: 'driverType' },
  { ellipsis: true, title: '维修员类型', key: 'repairmanType' },
  { ellipsis: true, title: '村干部类型', key: 'villageCadresType' },
  { ellipsis: true, title: '申请地址', dataIndex: 'applyAddress', key: 'applyAddress' },
  { ellipsis: true, title: '操作', key: 'set', width: 160, align: 'center' }
])
// 授权
const auth = (item) => {
  emits('auth', item)
}
provide('columns', columns.value)
</script>

<template>
  <MyTable :pagination="pagination" :scroll="{ y: 'calc(100vh - 383px)' }">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'auth'">
        <a-tag color="success">普通用户</a-tag>
        <a-tag color="success" v-if="record.isDriver === 1">农机操作手</a-tag>
        <a-tag color="success" v-if="record.isRepairman === 1">农机维修员</a-tag>
        <a-tag color="success" v-if="record.isAdmin === 1">管理员</a-tag>
        <a-tag color="success" v-if="record.isVillageCadres === 1">村级干部</a-tag>
        <a-tag color="success" v-if="record.isPurchaser === 1">采购专员</a-tag>
      </template>
      <template v-if="column.key === 'applyIdCardImg' && record.applyIdCardImg">
        <ImageView :value="record.applyIdCardImg" />
      </template>
      <template v-if="column.key === 'repairmanCertImg' && record.repairmanCertImg">
        <ImageView :value="record.repairmanCertImg" />
      </template>
      <template v-if="column.key === 'driverType'">
        {{ ['', '长期', '临时'][record.driverType] }}
      </template>
      <template v-if="column.key === 'repairmanType'">
        {{ ['', '长期', '临时'][record.repairmanType] }}
      </template>
      <template v-if="column.key === 'villageCadresType'">
        {{ ['', '长期', '临时'][record.villageCadresType] }}
      </template>
      <template v-if="column.key === 'set'">
        <AButton type="link" @click="auth(record)">授权</AButton>
      </template>
    </template>
  </MyTable>
</template>